本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

總算把插播的兩個偽元素 ( pseudo-element ) 主題都講完了，接下來讓我們回到偽類 ( pseudo-class ) 選取器的部分，這次來談 :checked 表單選取狀態選取器，這個選取器是屬於 CSS3 的規範，簡單來說作為一個狀態選取器，跟超連結的 :hover、:active ... 差不多，只是這個選取器是選取「當表單被勾選」的狀態，不多說直接原始碼伺候

HTML

<input type="checkbox" class="checkbox" id="box1">
<label for="box1">點這文字就能勾選了</label>

CSS

#box1:checked{ transform: scale(2); }

上面這段原始碼可以讓你的 checkbox 在被勾選時變大，很有趣吧! .........甚麼?!!! 你竟然說超無聊的? 你怎麼可以說出這種話傷害辛辛苦苦寫文的我還不按訂閱! 這太過分了! 為了讓你按下訂閱，這篇就寫到這邊就好(喂!)

特性應用發想

回題，你真的還不按訂閱嗎? ㄟ不是，其實如果說單純只看這個選取器的話，那個效果真的是滿弱的，但是! 只要搭配上我們前面講過的 親代選取器之妹妹選取器與鞭炮串選取器 就能發揮他異常強大的威力了。各位可以暫時停下閱讀試想一下這個選取器是不是就如同一個開關一樣，有開有關的兩種狀態，既然有兩種狀態且具備記憶狀態的能力，不像 常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富 只有暫時性的狀態且無法記憶，那麼我們能不能利用這樣的特性來製作具備有開關效果的網頁畫面呢! 這答案不用說一定是肯定的啦!

製作一個動態改變色彩的清單

有了特性的基本了解後，我們就能利用這樣的特性搭配 親代選取器之妹妹選取器與鞭炮串選取器 來做一個「當被勾選之後，右側文字就會改變色彩的清單」了，先來準備以下 HTML

<form class="list">
	<h2>金魚教學系列清單</h2>
	<div class="list-item">
		<label>
			<input type="checkbox" name="" id="">
			<span>金魚都能懂的網頁設計入門</span>
		</label>
	</div>
	<div class="list-item">
		<label>
			<input type="checkbox" name="" id="">
			<span>金魚都能懂的 CSS 選取器</span>
		</label>
	</div>
	<div class="list-item">
		<label>
			<input type="checkbox" name="" id="">
			<span>金魚都能懂的這個網頁畫面怎麼切</span>
		</label>
	</div>
	<div class="list-item">
		<label>
			<input type="checkbox" name="" id="">
			<span>暴力網頁入門班</span>
		</label>
	</div>
</form>

CSS

.list input[type="checkbox"]:checked + span{
	color: red;
}

上面這個例子是為了選取 checkbox 勾選狀態後方的 span ，所以 Amos 綜合使用了以下多種選取方式

• CSS 層疊式宣告 - 讓你快速選到特定元素內的物件的選取器
• CSS class 選取器 - 切版與前端框架最常使用的CSS選取器
• CSS 屬性選取器 - 一個選取自由度超高的選取器
• 親代選取器之妹妹選取器與鞭炮串選取器

一來使用了 層疊式宣告 (後代選取器) 來讓我的 CSS 不會影響到其他區域的項目，接著利用親代選取器 (同層選取器) 來選取到後方同層的物件，有沒有感覺到今天 CSS 選取器的例子似乎有點升了好幾級呢? 再次的讓我們回到鐵人賽第一天 Amos 說的那段話

每一種選取器都有它特殊的用途
熟悉各式選取器的組合搭配運用
可說是一個網頁切版人員或前端工程師的基礎必備能力

這就是一個 CSS 學習者的基本能力，回到應用面來說，讓我們繼續看下去。

更多範例

實際上 Amos 在撰寫網頁的時候，這個選取器蠻多可應用的情境，像是做手機板的選單、清單開關、清單選取效果、簡易的標籤面板...等等都可以用上，但還是要看工作需求啦，有時候用程式處理更彈性的話，我們就用程式會更快更「適合」喔。

以下幾個影片都是我曾經使用的地方，建議可以花點時間看完，應該可以腦洞大開喔。

• 金魚都能懂的這個網頁畫面怎麼切 : 動態收合式側邊選單
• 阿莫斯の網頁料理室 : CSS checked 選取器的應用
• 阿莫斯の網頁料理室 : 網頁選單好難寫啦

以上就是今天的 金魚都能懂的 CSS 選取器 - :checked 表單狀態選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學